<template>
    <el-form style="margin: auto;" :model="clueRemark" :rules="clueRemarkRules" ref="clueRemarkFormRef">
        <el-row :gutter="20" label-width="5.2%">
            <el-col :span="8">
                <el-form-item label="线索ID:">
                    <div>{{ clueDetail.id }}</div>
                </el-form-item>
                <el-form-item label="线索所属人ID:">
                    <div>{{ clueDetail.ownerId }}</div>
                </el-form-item>
                <el-form-item label="负责人姓名:">
                    <div>{{ clueDetail.ownerDo.name }}</div>
                </el-form-item>
                <el-form-item label="所属活动ID:">
                    <div>{{ clueDetail.activityId }}</div>
                </el-form-item>
                <el-form-item label="所属活动:">
                    <div>{{ clueDetail.activityDo.name }}</div>
                </el-form-item>
                <el-form-item label="姓名:">
                    <div>{{ clueDetail.fullName }}</div>
                </el-form-item>
                <el-form-item label="称呼:">
                    <div>{{ clueDetail.appellationDo.typeValue }}</div>
                </el-form-item>
                <el-form-item label="手机号:">
                    <div>{{ clueDetail.phone }}</div>
                </el-form-item>
                <el-form-item label="微信号:">
                    <div>{{ clueDetail.weixin }}</div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="QQ号:">
                    <div>{{ clueDetail.qq }}</div>
                </el-form-item>
                <el-form-item label="邮箱:">
                    <div>{{ clueDetail.email }}</div>
                </el-form-item>
                <el-form-item label="年龄:">
                    <div>{{ clueDetail.age }}</div>
                </el-form-item>
                <el-form-item label="职业:">
                    <div>{{ clueDetail.job }}</div>
                </el-form-item>
                <el-form-item label="年收入:">
                    <div>{{ clueDetail.yearIncome }}</div>
                </el-form-item>
                <el-form-item label="地址:">
                    <div>{{ clueDetail.address }}</div>
                </el-form-item>
                <el-form-item label="是否需要贷款:">
                    <div>{{ clueDetail.needLoanDo.typeValue }}</div>
                </el-form-item>
                <el-form-item label="意向状态:">
                    <div>{{ clueDetail.intentionStateDo.typeValue }}</div>
                </el-form-item>
                <el-form-item label="意向产品:">
                    <div>{{ clueDetail.intentionProductDo.name }}</div>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="线索状态:">
                    <div>{{ clueDetail.stateDo.typeValue }}</div>
                </el-form-item>
                <el-form-item label="线索来源:">
                    <div>{{ clueDetail.sourceDo.typeValue }}</div>
                </el-form-item>
                <el-form-item label="线索描述:">
                    <div>{{ clueDetail.description }}</div>
                </el-form-item>
                <el-form-item label="下次联系时间:">
                    <div>{{ clueDetail.nextContactTime }}</div>
                </el-form-item>
                <el-form-item label="创建时间:">
                    <div>{{ clueDetail.createTime }}</div>
                </el-form-item>
                <el-form-item label="创建人:">
                    <div>{{ clueDetail.createByDo.name }}</div>
                </el-form-item>
                <el-form-item label="编辑时间:">
                    <div>{{ clueDetail.editTime }}</div>
                </el-form-item>
                <el-form-item label="编辑人:">
                    <div>{{ clueDetail.editByDo.name }}</div>
                </el-form-item>
            </el-col>
        </el-row>

        <el-col>
            <el-form label-width="4.15%" style="margin: auto;">
                <el-form-item label="线索跟踪记录" prop="noteContent">
                    <el-input
                        v-model="clueRemark.noteContent"
                        rows="3"
                        type="textarea"
                        placeholder="请输入活动备注记录"
                        style="width: 20%;"
                    />
                </el-form-item>
                <el-form-item label="跟踪方式" prop="noteWay">
                    <el-select
                        v-model="clueRemark.noteWay"
                        placeholder="请选择跟踪方式"
                        clearable
                        style="width: 20%;"
                        @click="loadDicData('noteWay')">
                        <el-option
                            v-for="item in noteWayOptions"
                            :key="item.id"
                            :label="item.typeValue"
                            :value="item.id"/>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-form-item>
                <el-button type="primary" @click="clueRemarkSubmit">提交</el-button>
                <el-button type="success" @click="convertCustomer" v-if="clueDetail.state != -1">转换客户</el-button>
                <el-button type="primary" plain v-on:click="goBack">返回</el-button>
            </el-form-item>

            <el-form-item>
                <el-table :data="clueRemarkPageInfo.list" style="width: 100%">
                    <el-table-column type="index" label="序号" width="55px"/>
                    <el-table-column property="noteWayDo.typeValue" label="跟踪方式"/>
                    <el-table-column property="noteContent" label="跟踪内容"/>
                    <el-table-column property="createTime" label="创建时间"/>
                    <el-table-column property="createByDo.name" label="创建人"/>
                    <el-table-column property="editTime" label="编辑时间"/>
                    <el-table-column property="editByDo.name" label="编辑人"/>
                    <el-table-column label="操作" width="110">
                        <template #default="scope">
                            <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)"/>
                            <el-button type="danger" :icon="Delete" circle @click="deleteClueRemark(scope.row.id)"/>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-pagination
                background layout="prev, pager, next, jumper, total"
                :total="clueRemarkPageInfo.total"
                :page-size="clueRemarkPageInfo.pageSize"
                @change="toPage"/>
        </el-col>
    </el-form>

    <!--转换客户的弹窗对话框-->
    <el-dialog v-model="convertCustomerDialogVisible" title="转换客户" width="800" align-center>
        <el-form label-width="auto" :model="customer" :rules="customerRules" ref="customerFormRef">
            <el-form-item label="意向产品" prop="intentionProduct">
                <el-select v-model="customer.intentionProduct" placeholder="请选择意向产品"
                           @click="loadProduct()">
                    <el-option
                        v-for="item in intentionProductOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        clearable/>
                </el-select>
            </el-form-item>
            <el-form-item label="客户描述" prop="description">
                <el-input v-model="customer.description" rows="8" type="textarea" placeholder="请输入客户描述"/>
            </el-form-item>
            <el-form-item label="下次跟踪时间" prop="nextContactTime">
                <el-date-picker v-model="customer.nextContactTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择下次跟踪时间" style="width: 100%;" clearable/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="convertCustomerSubmit(customerFormRef)">转 换</el-button>
                <el-button @click="convertCustomerDialogVisible = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {inject, onMounted, ref} from "vue";
import {doDelete, doGet, doPost} from "../http/httpRequest.js";
import {useRoute, useRouter} from "vue-router";
import {confirmMessage, showMessage} from "../util/message.js";
import {Delete, Edit, Message} from "@element-plus/icons-vue";

// 线索详情数据对象，使用ref响应式包装
let clueDetail = ref({
    ownerDo: {},  // 负责人信息对象，存储活动负责人的详细信息
    createByDo: {}, // 创建人信息对象，存储活动创建者的详细信息
    editByDo: {},  // 编辑人信息对象，存储最后编辑者的详细信息
    activityDo: {}, // 所属活动信息对象，存储线索关联的活动详细信息
    appellationDo: {}, // 称呼信息对象，存储线索联系人的称呼类型及值
    needLoanDo: {}, // 是否需要贷款信息对象，存储是否需要贷款的类型及值
    intentionStateDo: {}, // 意向状态信息对象，存储线索的意向状态类型及值
    stateDo: {}, // 线索状态信息对象，存储线索当前的状态类型及值
    sourceDo: {}, // 线索来源信息对象，存储线索的来源类型及值
    intentionProductDo: {} // 意向产品信息对象，存储线索意向的产品详细信息
});
// 活动跟踪记录对象，初始值是空
let clueRemark = ref({});
// 线索跟踪记录分页数据对象
let clueRemarkPageInfo = ref({});
// 路由对象，用于获取当前路由参数
let route = useRoute();
// 路由实例，用于页面导航操作
let router = useRouter();
// 转换客户弹窗显示状态，响应式变量控制弹窗显示/隐藏
let convertCustomerDialogVisible = ref(false);
// 下拉列表中的产品选项数据
let productOptions = ref([{}]);
// 客户信息对象，用于存储客户相关数据
let customer = ref({});
// 联系方式选项数据，用于下拉选择
let noteWayOptions = ref([]);
// 注入的刷新函数，用于数据更新后刷新页面
let flush = inject('flush');
// 意向产品选项列表
let intentionProductOptions = ref([]);

// 组件挂载完成后执行的钩子函数
onMounted(() => {
    // 加载线索详情数据
    loadClueDetail();
    // 加载线索跟踪记录列表，默认加载第一页
    loadClueRemarkList(1);
})

/**
 * 加载线索详情数据的函数
 * 从路由参数获取线索ID，调用API获取详情并处理响应数据
 */
const loadClueDetail = () => {
    // 从路由参数中获取线索ID
    let clueId = route.params.clueId;
    // 调用HTTP GET请求获取线索详情
    doGet('/api/clue/' + clueId).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 将获取的线索详情数据赋值给响应式对象
            clueDetail.value = resp.data.info;
            // 确保嵌套对象存在，避免模板中访问属性时出现undefined错误
            if (!clueDetail.value.ownerDo) clueDetail.value.ownerDo = {};
            if (!clueDetail.value.createByDo) clueDetail.value.createByDo = {};
            if (!clueDetail.value.editByDo) clueDetail.value.editByDo = {};
            if (!clueDetail.value.activityDo) clueDetail.value.activityDo = {};
            if (!clueDetail.value.appellationDo) clueDetail.value.appellationDo = {};
            if (!clueDetail.value.needLoanDo) clueDetail.value.needLoanDo = {};
            if (!clueDetail.value.intentionStateDo) clueDetail.value.intentionStateDo = {};
            if (!clueDetail.value.stateDo) clueDetail.value.stateDo = {};
            if (!clueDetail.value.sourceDo) clueDetail.value.sourceDo = {};
            if (!clueDetail.value.intentionProductDo) clueDetail.value.intentionProductDo = {};
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 加载字典数据的函数
 * @param {string} typeCode - 字典类型编码，用于指定要加载的字典类型
 */
const loadDicData = typeCode => {
    doGet('api/dic/' + typeCode, {}).then(resp => {
        if (resp.data.code == 200) {
            // 将获取的字典数据赋值给联系方式选项数组
            noteWayOptions.value = resp.data.info;
        } else {
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 加载产品列表数据
 * 功能：从后端API获取产品信息，用于意向产品选择
 */
const loadProduct = () => {
    doGet('/api/productType', {}).then(resp => {
        if (resp.data.code == 200) {
            intentionProductOptions.value = resp.data.info;
        } else {
            showMessage(resp.data.msg, 'error'); // 产品加载失败提示
        }
    })
}

/**
 * 提交线索跟踪记录的函数
 * 收集表单数据并调用API提交，处理成功/失败状态
 */
const clueRemarkSubmit = () => {
    doPost('/api/clue/remark', {
        clueId: route.params.clueId,
        noteContent: clueRemark.value.noteContent,
        noteWay: clueRemark.value.noteWay
    }).then(resp => {
        if (resp.data.code == 200) {
            showMessage(resp.data.msg, 'success');
            flush(); // 调用刷新函数，重新加载数据
        } else {
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 加载线索跟踪记录列表的函数
 * @param {number} current - 当前页码，用于分页加载数据
 */
const loadClueRemarkList = current => {
    let clueId = route.params.clueId;
    doGet('/api/clue/' + clueId + '/remarks', {
        current: current
    }).then(resp => {
        if (resp.data.code == 200) {
            // 将获取的分页数据赋值给响应式对象
            clueRemarkPageInfo.value = resp.data.info;
        } else {
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 删除线索跟踪记录的函数
 * @param {number} id - 要删除的跟踪记录ID
 */
const deleteClueRemark = id => {
    // 显示删除确认对话框，'warning'类型会显示黄色警告图标
    confirmMessage('确定删除?', 'warning').then(resp => {
        // 用户确认后调用删除API，拼接活动ID到URL
        doDelete('/api/clue/remark/delete/' + id).then(resp => {
            if (resp.data.code == 200) {
                showMessage('删除成功', 'success'); // 显示绿色成功提示
                flush(); // 调用注入的刷新函数，重新加载活动列表
            } else {
                showMessage(resp.data.msg, 'error'); // 显示红色错误提示，内容为后端返回的错误信息
            }
        }).catch(() => {
            // 捕获API调用异常（如网络错误），此处留空表示不做额外处理
        })
    })
}

/**
 * 分页导航函数
 * @param {number} current - 要跳转到的页码
 */
const toPage = current => {
    loadClueRemarkList(current);
}

/**
 * 跳转到编辑页面的函数
 * @param {number} id - 要编辑的跟踪记录ID
 */
const edit = id => {
    router.push('/dashboard/clue/remark/edit/' + id);
}

/**
 * 打开转换客户弹窗
 * 通过设置弹窗显示状态为true，触发转换客户对话框的显示
 */
const convertCustomer = () => {
    convertCustomerDialogVisible.value = true;
}

/**
 * 提交线索转换为客户的表单数据
 * 调用后端API完成线索到客户的转换操作，并根据响应结果显示提示信息
 */
const convertCustomerSubmit = () => {
    // 发送POST请求到客户创建接口，提交转换所需数据
    doPost("/api/customer", {
        clueId: route.params.clueId,  // 线索ID，用于关联要转换的线索
        product: clueRemark.value.product,  // 产品信息（注意：此处实际应绑定customer对象，当前代码可能存在变量名误用）
        description: clueRemark.value.description,  // 客户描述信息
        nextContactTime: clueRemark.value.nextContactTime  // 下次联系时间
    }).then(resp => {
        if (resp.data.code == 200) {  // 请求成功处理
            showMessage(resp.data.msg, 'success');  // 显示成功提示
            flush();  // 调用刷新函数，更新页面数据状态
        } else {  // 请求失败处理
            showMessage(resp.data.msg, 'error');  // 显示错误提示
        }
    })
}

/**
 * 返回上一页函数
 * 通过路由实例的back方法实现页面回退
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>
.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>